<template>
  <div>
    <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
      <tr>
        <td width="150">中间品检验管理编号</td>
        <td>{{ item.number }}</td>
        <td width="150">生产批号</td>
        <td>{{ item.batchNumber }}</td>
      </tr>
      <tr>
        <td>检验部门</td>
        <td>{{ item.manageDeptName }}</td>
        <td>检验员</td>
        <td>{{ item.manageUserName }}</td>
      </tr>
      <tr>
        <td>检验日期</td>
        <td>{{ item.examinDate }}</td>
        <td>编制部门</td>
        <td>{{ item.createDeptName }}</td>
      </tr>
    </table>

    <div class="mb20">中间品信息如下：</div>

    <div v-for="(v, index) in item.middleList" :key="index">
      <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
        <tr>
          <td>中间品名称</td>
          <td>{{ v.middleName }}</td>
          <td>中间品规格</td>
          <td>{{ v.middleSku }}</td>
        </tr>
        <tr>
          <td>中间品编号</td>
          <td>{{ v.middleNumber }}</td>
          <td>检验方式</td>
          <td>{{ v.examineType==0?'全部检验':'计数抽样检验' }}</td>
        </tr>
        <tr>
          <td>合格数量</td>
          <td>{{ v.qualifiedQty }}</td>
          <td>不合格数量</td>
          <td>{{ v.failedQty }}</td>
        </tr>
        <tr>
          <td>是否使用设备</td>
          <td colspan="3">
            <span>{{ v.deviceList && v.deviceList.length != 0 ? '是' : '否' }}</span>
            <el-button v-if="v.deviceList && v.deviceList.length > 3" class="ml30" type="primary" size="mini" plain @click="v.showmore = !v.showmore">
              {{ v.showmore ? '收起设备详情' : '展开设备详情' }}
              <i :class="{ 'el-icon-arrow-down': !v.showmore, 'el-icon-arrow-up': v.showmore }"></i>
            </el-button>
          </td>
        </tr>
      </table>

      <table class="table1 owntable mb20 deviceCon tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="v.showmore">
        <tr>
          <td>设备名称</td>
          <td>设备型号</td>
          <td>设备编号</td>
        </tr>
        <tr v-for="(m, i) in v.deviceList" :key="i">
          <td>{{ m.deviceName }}</td>
          <td>{{ m.deviceModel }}</td>
          <td>{{ m.deviceNumber }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {}
  },
  watch: {
    item: {
      handler(newval) {
        console.log(newval);
        if (newval.purchaseType == 0) {
          newval.materialList.forEach(item => {
            if (item.deviceList) {
              if (item.deviceList.length <= 3) {
                item.showmore = true;
              } else {
                item.showmore = false;
              }
            }
          });
        }
      }
    }
  }
};
</script>

<style scoped lang="scss">
.deviceCon {
  tr,
  td {
    background: #d9e5f0 !important;
  }
}
</style>
